<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!--绘制实时信号的部分-->
      <el-col :span="17" >
        <!--绘制实时心电信号子组件-->
          <ecgchart>
          </ecgchart>
      </el-col>
      <!--显示用户信息及心率指标的部分-->
      <br>
      <el-col :span="6">
        <el-row :gutter="15">
          <el-card>
            <div slot="header"><span>用户信息</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td><div class="cell">姓名</div></td>
                  <td><div class="cell" v-if=true>简璞</div></td>
                </tr>
                <tr>
                  <td><div class="cell">年龄</div></td>
                  <td><div class="cell" v-if=true>23</div></td>
                </tr>
                <tr>
                  <td><div class="cell">性别</div></td>
                  <td><div class="cell" v-if=true>男</div></td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-row>
        <br>
        <el-row :gutter="15">
          <el-card>
            <div slot="header"><span>心电信号统计信息</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 90%;">
                <tbody>
                <tr>
                  <td><div class="cell">平均心率</div></td>
                  <td><div class="cell" v-if=true>97</div></td>
                </tr>
                <tr>
                  <td><div class="cell">最高逐拍心率</div></td>
                  <td><div class="cell" v-if=true>137</div></td>
                </tr>
                <tr>
                  <td><div class="cell">最低逐拍心率</div></td>
                  <td><div class="cell" v-if=true>20</div></td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>

    <br>
    <br>
    <br>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="ecgParams" :rules="rules" size="medium" label-width="101px">
        <!--设备选择部分-->
        <el-col :span="12" align="center" class="card-box">
          <el-card>
            <div slot="header"><span>设备选择</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;" >
                <tbody>
                <tr>
                  <td><div class="cell" align="center">设备类型</div></td>
                  <td><div class="cell" align="center">心电图</div></td>
                  <td><div class="cell" align="center">设备ID</div></td>
                  <td><div class="cell" align="center">
                    <el-form-item prop="id">
                      <el-select  v-model="ecgParams.id" placeholder="请选择" clearable :style="{ width: '100%'}">
                        <el-option v-for="item in ecgOptions"
                                   :key="item.id" :label="'心电图:编号'+item.id"
                                   :value="item.id" :disabled="item.status == 1"></el-option>
                      </el-select>
                    </el-form-item>
                  </div></td>
                </tr>
                <tr>
                  <td><div class="cell" align="center">采样率/Hz</div></td>
                  <td><div class="cell" align="center">
                    <el-form-item prop="samplerate">
                      <el-select  v-model="ecgParams.samplerate" placeholder="请选择" clearable :style="{width: '100%'}">
                        <!--属性的字符串拼接,这个知识点蛮重要的-->
                        <el-option v-for="value in fsOptions" :key="value" :label="value+'Hz'"
                                   :value="value" ></el-option>
                      </el-select>
                    </el-form-item>

                  </div></td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>

          <br>
          <el-row>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-row>
        </el-col>

        <!--设备信息实时展示部分-->
        <el-col :span="12" class="card-box">
          <el-card>
            <div slot="header"><span>设备实时信息</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td><div class="cell">mac地址</div></td>
                  <td><div class="cell" v-if=true>12345678</div></td>
                  <td><div class="cell">是否有本地记录</div></td>
                  <td><div class="cell" v-if=true>有</div></td>
                </tr>
                <tr>
                  <td><div class="cell">磁盘总容量</div></td>
                  <td><div class="cell" v-if=true>1024M</div></td>
                  <td><div class="cell">磁盘剩余容量</div></td>
                  <td><div class="cell" v-if=true>512M</div></td>
                </tr>
                <tr>
                  <td><div class="cell">电池剩余电量</div></td>
                  <td><div class="cell" v-if=true>99%</div></td>
                  <td><div class="cell">网络延时</div></td>
                  <td><div class="cell" v-if=true>12ms</div></td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  import ecgchart from '@/views/components/psysignal/ecgchart/index.vue'
  import {getECG} from "../../../api/psysignal/ecg"

  export default {
    name: 'ecg',
    components: {
      "ecgchart": ecgchart},
    props: [],
    data() {
      return {
        // 设备信息数组
        ecgOptions: [],
        // 采样率选项
        fsOptions: [200,250,400,1000],
        // 心电图机参数
        ecgParams: {
          id: undefined,
          // 设备类型一定是心电图机，对应ID为1
          pId: 1,
          samplerate: undefined
        },
        formData: {
          field129: undefined,
          field131: undefined,
          field130: undefined,
        },
        rules: {
          id: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          samplerate: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
        },
        field129Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        field131Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        field130Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {
      //首先我们要获取所有的心电图数组
      this.getList();
    },
    mounted() {},
    methods: {
      //获取心电图机数组
      getList() {
        let  that = this;
        getECG(this.ecgParams).then(response =>{
          that.ecgOptions = response.ecg;
        })
      },
      submitForm() {
        console.log(this.ecgOptions)
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          // 查询指定ID的设备信息
          
          // 查询与设备相关联的用户信息

          // 将设备的采样率设置写入数据库
        })
      },


      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
  #equip_select{ border:1px solid #7d7d7d}
</style>
